<template>
  <div class="page" :style="{minHeight:docHeight}">
    <LeftSideBar></LeftSideBar>
    <div class="content-main clearfix">
      <ELHeader></ELHeader>
      <div class="right-content clearfix">
        <div class="breadcrumb">
          <el-breadcrumb separator=">">
            <i class="bread-ico">
              <icon name="wpexplorer"></icon>
            </i>
            <el-breadcrumb-item :to="{ path: '/' }">
              首页
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/profile' }">客户编辑</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="tabpane-container">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="客户编辑" name="profile-info"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  @import '../scss/index';
    .echarts {
        height: 300px
    }

    .content-main{
      height: 0;
      position: relative;
      float: left;
      min-height: 100%;
      width: 85%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .echart-line{
      width: 100%;
      height: 400px;
    }

    .bread-ico {
      float: left;
      margin-right: 8px;
      margin-top: -8px;
      width: 30px;

      .fa-icon {
        width: 100%;
        height: 100%;
      }
    }
</style>

<script>
import Header from 'components/AdminHeader'
import LeftSideBar from 'components/LeftSideBar'
import { Col } from 'element-ui'
import { Popover, Breadcrumb, BreadcrumbItem, Tabs, TabPane } from 'element-ui'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/wpexplorer'

export default {
  data () {
    return {
      showUserPanel: false,
      docHeight: window.innerHeight + 'px',
      screenWidth: document.body.clientWidth,
      resize: false,
      activeName: 'profile-info'
    }
  },

  watch: {
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        const that = this

        setTimeout(function () {
          that.resize = !that.resize
          that.timer = false
        }, 400)
      }
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  },
  mounted: function () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },

  components: {
    ELHeader: Header,
    LeftSideBar: LeftSideBar,
    [Popover.name]: Popover,
    [Breadcrumb.name]: Breadcrumb,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [BreadcrumbItem.name]: BreadcrumbItem,
    'el-col': Col,
    'icon': Icon
  }
}

</script>
